<template>
    <div class="right-bar">
        <div class="rightbar-item">
            <div class="avatar-border">
                <img src="../../static/img/girl.jpg" alt="" srcset="">
                <span class="iconfont icon-jia"></span>
            </div>
        </div>
        <div class="item-icon">
            <span class="iconfont icon-aixin"></span>
            <p>18.0w</p>
        </div>
        <div class="item-icon">
            <span class="iconfont icon-pinglun"></span>
            <p>18.0w</p>
        </div>
        <div class="item-icon">
            <span class="iconfont icon-arrow-"></span>
            <p>18.0w</p>
        </div>
        <div class="rightbar-item">
            <div class="right-music">
                <img src="../../static/img/girl.jpg" alt="" srcset="">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>

     .right-bar .rightbar-item{
         height: 60px;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         padding-bottom: 10px;
     }
     .avatar-border{
         height: 50px;
         width: 50px;
         border: 1px white solid;
         border-radius: 50%;
         position: relative;
         text-align: center;
     }
     .avatar-border img{
         width: 49px;
         height: 49px;
         border-radius: 50%;
     }
     .avatar-border .icon-jia{
         font-size: 20px;
         color: #FE2C5A;
         position: absolute;
         top: 42px;
         left: 0;
         right: 0;
     }
     .right-bar .item-icon{
         height: 60px;
         text-align: center;
         padding-top: 12px;
         
     }
     .item-icon span{
         width: 40px;
         height: 40px;
         /* border: 1px white solid; */
     }
     .item-icon .iconfont{
         color: #ffffff;
         font-size: 35px;
         padding-bottom: 0px;
     }
     .item-icon p{
         color: white;
         font-size: 14px;
         margin-top: 3px;
         padding-top: 0; 
         
     }
     .rightbar-item{
         padding-top: 10px;

     }
     .rightbar-item .right-music{
         
         height: 54px;
         width: 54px;
         background: #2e2e2e;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         animation: round 6s 0s linear infinite;
         
       
     }
     .right-music img{
         height: 30px;
         width: 30px;
         border-radius: 50%;
     }
     @keyframes round{
         0%{transform: rotate(0deg);}
         100%{transform:rotate(360deg);}
     }
</style>